import React from 'react';
import {Table} from 'antd';
import PropTypes from 'prop-types';
import {TABLE, COMMON_TABLE_QUERY_FAIL_TEXT, COMMON_TABLE_EMPTY_TEXT} from '../constants';
import {injectIntl} from './intl';
import {addMonths} from './utils';
import {conventEnumValueToString} from '../utils';
import {partChannel} from '../Enum';

export class TablePanelMonth extends React.PureComponent {
    handleFilterChange = (value, name) => {
        this.props.onConditionsChange(name, value);
        this.props.querySearchCountry(value);
    }
    onChange = (value, name) => {
        this.props.onConditionsChange(name, value);
        this.props.querySearchCountry(value);
    }
    onChangeMonthPicker = (value, name) => {
        this.props.onConditionsChange('monthweek', name);
    }
    render() {
        const {
            conditions,
            dataMonth,
            loading,
            hasError
        } = this.props;
        const columnsMonth = [
            {
                title: this.props.intl.formatMessage({
                    id: 'tablePanel.column.channel',
                    defaultMessage: '渠道'
                }),
                dataIndex: 'channel',
                render: (text, record) => ({
                    children: conventEnumValueToString(partChannel, text),
                    props: {
                        rowSpan: text && record.rowSpan ? record.rowSpan : 0,
                    },
                })
            }, {
                title: this.props.intl.formatMessage({
                    id: 'tablePanel.column.type',
                    defaultMessage: '分类'
                }),
                dataIndex: 'type'
            }, {
                title: addMonths(11, conditions.month),
                dataIndex: 'n1MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(10, conditions.month),
                dataIndex: 'n2MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(9, conditions.month),
                dataIndex: 'n3MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(8, conditions.month),
                dataIndex: 'n4MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(7, conditions.month),
                dataIndex: 'n5MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(6, conditions.month),
                dataIndex: 'n6MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(5, conditions.month),
                dataIndex: 'n7MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(4, conditions.month),
                dataIndex: 'n8MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(3, conditions.month),
                dataIndex: 'n9MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(2, conditions.month),
                dataIndex: 'n10MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(1, conditions.month),
                dataIndex: 'n11MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }, {
                title: addMonths(0, conditions.month),
                dataIndex: 'n12MonthNumber',
                render: (text, record, index) => ({
                    children: index === 6 ? `${text}%` : text
                })
            }];
        return (
            <div>
                <Table
                    className="white-space-nowrap"
                    rowKey="type"
                    dataSource={dataMonth}
                    columns={columnsMonth}
                    loading={loading}
                    pagination={false}
                    {...TABLE}
                    locale={{
                        emptyText: hasError ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
                    }} />
            </div>
        );
    }
}

TablePanelMonth.propTypes = {
    conditions: PropTypes.object.isRequired,
    dataMonth: PropTypes.array.isRequired,
    hasError: PropTypes.string,
    intl: PropTypes.object,
    loading: PropTypes.bool,
};

import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';

const getDataMonth = selectorFactory(['page', 'domainData', 'listMonth', 'data']);
const getConditions = selectorFactory(['page', 'appState', 'queryCondition']);
const mapStateToProps = state => ({
    dataMonth: getDataMonth(state),
    loading: state.getIn(['page', 'domainData', 'listMonth', 'isFetching']),
    hasError: state.getIn(['page', 'domainData', 'listMonth', 'hasError']),
    conditions: getConditions(state),
});
export default connect(mapStateToProps, null)(injectIntl(TablePanelMonth));

